<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>
<div id="app">

    <h2>313{{st}}221</h2>
    <p  v-text="st"></p>
    <p v-html="st"></p>

    <input type="text" v-model.number="val">
    <p v-bind:class="name" v-bind:style="{color:color}">{{val}}</p>
    <p v-bind:class="name" v-bind:style="{color:bool?'red':'blue'}">{{val}}</p>

    <button v-on:click="change('asd',$event)">修改</button>

    <button @click="onSort('id')">id排序</button>
    <button @click="onSort('age')">age排序</button>
    <button @click="onSortNot()">过滤排序</button>

    <ul>
        <li v-for="item in studentList">
            id:{{item.id}}--name:{{item.name}}--age:{{item.age}}
        </li>
    </ul>

    <button @click="bool=!bool">v-if</button>
    <p v-if="bool">这是v-if</p>
    <p v-else>这是v-else</p>
    <form action="/submit-your-data" method="post">
        <label for="fname">名字:</label><br>
        <input type="text" id="fname" name="firstname" value="John"><br>
        <label for="pswd">密码:</label><br>
        <input type="password" id="pswd" name="password"><br>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label><br>
        <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
        <label for="vehicle1"> 我有一辆自行车</label><br>
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
        </select><br><br>
        <input type="submit" value="提交">
    </form>
<!--    <button @click="bool=!bool">v-show</button>-->
</div>
<!--<script src="vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>



    new Vue({
        el:'#app',
        data:{
            st:'<button>你好vue</button>',
            val:'',
            name:'zhuzhuxia',
            color:'red',
            bool:true,
            studentList:[
                {
                    id:1,
                    name:'张三',
                    age:23
                },
                {
                    id:2,
                    name:'发生',
                    age:21
                },{
                    id:3,
                    name:'帮我',
                    age:32
                },{
                    id:4,
                    name:'安徽',
                    age:12
                }
            ]
        },

        methods:{
            change(st,e){
                console.log(666);
                this.st+='abc'
                console.log(e)
            },
            onSort(key){
                this.studentList.sort((a,b)=> a[key] - b[key])
            },

            onSortNot(){
                this.studentList=this.studentList.filter(item=>item.age<=20)

            }

        }

    })

</script>





</body>
</html>